<!DOCTYPE html>
<!-- 是Thyme leaf 命名空间，通过引入该
 命名空间就可以在HTML 文件中使用Thymeleaf 标签语言，用关键字“ th ” 来标注。-->
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/header :: common_header(~{::title},~{::link})">
    <meta name="renderer" content="webkit">
    <title>用户列表</title>
    <link th:href="@{/css/user/user-info.css}" rel="stylesheet">
</head>
<body>
<div id="container">

    <div class="search bar">
        <form class="search_form">
            <input id="userId" class="search_input" type="text" placeholder="请输入id" name="cname">
            <button class="search_input" type="submit" onclick="return searchUserInfo()"></button>
        </form>
    </div>

    <table class="user_table" border="1" id="userInfo">
        <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>电话</th>
            <th>邮箱</th>
            <th>创建时间</th>
            <th>修改</th>
            <th>状态</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        </tbody>
    </table>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">修改用户</h4>
                </div>
                <div class="modal-body">
                    <form action="" method="post" class="update_user_style">
                        <label class="update_user_style-label">
                            <span class="update_user_style-span">姓名 :</span>
                            <input class="update_user_style-input" id="userName" type="text" name="userName" placeholder="userName"/>
                        </label>
                        <label class="update_user_style-label">
                            <span class="update_user_style-span">密码 :</span>
                            <input class="update_user_style-input" id="password" type="text" name="password" placeholder="password"/>
                        </label>
                        <label class="update_user_style-label">
                            <span class="update_user_style-span">电话 :</span>
                            <input class="update_user_style-input" id="phone" type="text" name="phone" placeholder="phone"/>
                        </label>
                        <label class="update_user_style-label">
                            <span class="update_user_style-span">邮箱 :</span>
                            <input class="update_user_style-input" id="email" type="email" name="email" placeholder="email"/>
                        </label>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="return updateUser_goServer()">提交更改</button>
                </div>
            </div>
        </div>
    </div>

    <div class="pagination">
        <span title="首页" onclick="goFirstPage()">首页</span>
        <span title="上一页" onclick="up_down_page(true)">上一页</span>
        <span th:name="pageSpan" id="minPage" onclick="goPage(this)">1</span>
        <span th:name="pageSpan" onclick="goPage(this)">2</span>
        <span th:name="pageSpan" onclick="goPage(this)">3</span>
        <span th:name="pageSpan" onclick="goPage(this)">4</span>
        <span th:name="pageSpan" onclick="goPage(this)">5</span>
        <span th:name="pageSpan"  onclick="goPage(this)">6</span>
        <span th:name="pageSpan" id="maxPage" onclick="goPage(this)">7</span>
        <span onclick="up_down_page(false)">下一页</span>
        <span onclick="goEndPage()">尾页</span>
    </div>

</div>

<script th:inline="javascript" th:src="@{/js/backstage/user.js}"></script>
</body>
</html>